
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>业务指标监控仪表盘</title>
	<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
	<script src="https://cdn.tailwindcss.com"></script>
	<style>
        .gauge-container {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
        }
        .gauge-container:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.3);
        }
        .control-panel {
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.2);
        }
	</style>
</head>
<body class="bg-gray-900 min-h-screen text-white">
<!-- 头部导航 -->
<header class="bg-gray-800 shadow-lg">
	<div class="container mx-auto px-6 py-4">
		<div class="flex justify-between items-center">
			<div class="flex items-center space-x-4">
				<i class="fas fa-tachometer-alt text-2xl text-blue-400"></i>
				<h1 class="text-2xl font-bold">业务指标监控系统</h1>
			</div>
			<nav class="hidden md:flex space-x-6">
				<a href="#" class="hover:text-blue-400 transition-colors">仪表盘</a>
				<a href="#" class="hover:text-blue-400 transition-colors">历史数据</a>
				<a href="#" class="hover:text-blue-400 transition-colors">系统设置</a>
			</nav>
			<div class="flex items-center space-x-4">
				<button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg transition-colors">
					<i class="fas fa-cog mr-2"></i>设置
				</button>
			</div>
		</div>
	</div>
</header>

<!-- 主功能区域 -->
<main class="container mx-auto px-6 py-8">
	<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
		<!-- 完成率仪表盘 -->
		<div class="gauge-container p-6">
			<div class="flex justify-between items-center mb-4">
				<h2 class="text-xl font-semibold">任务完成率</h2>
				<div class="flex items-center space-x-2 text-sm">
					<span class="text-green-400">良好</span>
					<i class="fas fa-check-circle text-green-400"></i>
				</div>
			</div>
			<div id="completionGauge" class="h-80"></div>
		</div>

		<!-- 性能指标仪表盘 -->
		<div class="gauge-container p-6">
			<div class="flex justify-between items-center mb-4">
				<h2 class="text-xl font-semibold">系统性能</h2>
				<div class="flex items-center space-x-2 text-sm">
					<span class="text-yellow-400">正常</span>
					<i class="fas fa-exclamation-triangle text-yellow-400"></i>
				</div>
			</div>
			<div id="performanceGauge" class="h-80"></div>
		</div>
	</div>

	<!-- 控制面板 -->
	<div class="control-panel rounded-2xl p-6 mt-8">
		<h3 class="text-lg font-semibold mb-4">控制面板</h3>
		<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
			<div class="space-y-4">
				<label class="block text-sm font-medium">目标值设置</label>
				<input type="range" id="targetSlider" min="0" max="100" value="85"
				       class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
				<div class="flex justify-between text-sm">
					<span>0%</span>
					<span id="targetValue">85%</span>
					<span>100%</span>
				</div>
			</div>
			<div class="space-y-4">
				<label class="block text-sm font-medium">更新频率</label>
				<select id="updateFrequency" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2">
					<option value="2000">2秒</option>
					<option value="5000" selected>5秒</option>
					<option value="10000">10秒</option>
				</select>
			</div>
			<div class="space-y-4">
				<button id="manualUpdate" class="w-full bg-green-600 hover:bg-green-700 py-2 rounded-lg transition-colors">
					<i class="fas fa-sync-alt mr-2"></i>手动更新
				</button>
				<button id="resetData" class="w-full bg-red-600 hover:bg-red-700 py-2 rounded-lg transition-colors">
					<i class="fas fa-redo mr-2"></i>重置数据
				</button>
			</div>
		</div>
	</div>
</main>

<!-- 页脚 -->
<footer class="bg-gray-800 mt-12 py-6">
	<div class="container mx-auto px-6 text-center text-gray-400">
		<p>© 2025 业务指标监控系统 | 最后更新: <span id="lastUpdateTime"></span></p>
	</div>
</footer>

<script>
    // 初始化图表
    const completionGauge = echarts.init(document.getElementById('completionGauge'));
    const performanceGauge = echarts.init(document.getElementById('performanceGauge'));

    // 完成率仪表盘配置
    const completionOption = {
        series: [{
            name: '完成率',
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 100,
            splitNumber: 10,
            radius: '90%',
            axisLine: {
                lineStyle: {
                    width: 20,
                    color: [
                        [0.3, '#FF6B6B'],
                        [0.7, '#FFD93D'],
                        [1, '#6BCF7F']
                    ]
                }
            },
            axisTick: {
                splitNumber: 5,
                length: 8,
                lineStyle: {
                    color: 'auto'
                }
            },
            splitLine: {
                length: 20,
                lineStyle: {
                    color: 'auto'
                }
            },
            axisLabel: {
                color: '#fff',
                distance: -40,
                fontSize: 12
            },
            pointer: {
                icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                length: '12%',
                width: 20,
                offsetCenter: [0, '-60%'],
                itemStyle: {
                    color: 'auto'
                }
            },
            title: {
                offsetCenter: [0, '20%'],
                fontSize: 16,
                color: '#fff'
            },
            detail: {
                valueAnimation: true,
                formatter: '{value}%',
                offsetCenter: [0, '40%'],
                fontSize: 24,
                color: '#fff',
                fontWeight: 'bold'
            },
            data: [{
                value: 78,
                name: '任务完成率'
            }]
        }]
    };

    // 性能指标仪表盘配置
    const performanceOption = {
        series: [{
            name: '性能指标',
            type: 'gauge',
            startAngle: 210,
            endAngle: -30,
            min: 0,
            max: 100,
            radius: '90%',
            axisLine: {
                lineStyle: {
                    width: 15,
                    color: [
                        [0.2, '#4ECDC4'],
                        [0.8, '#45B7D1'],
                        [1, '#96CEB4']
                    ]
                }
            },
            axisTick: {
                splitNumber: 5,
                length: 6
            },
            splitLine: {
                length: 15
            },
            axisLabel: {
                color: '#fff',
                distance: -30
            },
            pointer: {
                width: 8
            },
            title: {
                show: false
            },
            detail: {
                valueAnimation: true,
                formatter: '{value}%',
                fontSize: 20,
                color: '#fff'
            },
            data: [{
                value: 65
            }]
        }]
    };

    // 设置初始配置
    completionGauge.setOption(completionOption);
    performanceGauge.setOption(performanceOption);

    let updateInterval;

    // 初始化更新定时器
    function startAutoUpdate() {
        const frequency = parseInt(document.getElementById('updateFrequency').value);
        clearInterval(updateInterval);
        updateInterval = setInterval(updateData, frequency);
    }

    // 更新数据函数
    function updateData() {
        const newCompletionValue = Math.min(100, Math.max(0,
            completionOption.series[0].data[0].value + (Math.random() * 10 - 5)
        ));
        const newPerformanceValue = Math.min(100, Math.max(0,
            performanceOption.series[0].data[0].value + (Math.random() * 8 - 4)
        ));

        completionOption.series[0].data[0].value = parseFloat(newCompletionValue.toFixed(1));
        performanceOption.series[0].data[0].value = parseFloat(newPerformanceValue.toFixed(1));

        completionGauge.setOption(completionOption);
        performanceGauge.setOption(performanceOption);

        updateLastUpdateTime();
    }

    // 更新最后更新时间
    function updateLastUpdateTime() {
        const now = new Date();
        document.getElementById('lastUpdateTime').textContent =
            now.toLocaleString('zh-CN');
    }

    // 事件监听器
    document.getElementById('targetSlider').addEventListener('input', function(e) {
        const value = e.target.value;
        document.getElementById('targetValue').textContent = value + '%';
    });

    document.getElementById('updateFrequency').addEventListener('change', startAutoUpdate);

    document.getElementById('manualUpdate').addEventListener('click', updateData);

    document.getElementById('resetData').addEventListener('click', function() {
        completionOption.series[0].data[0].value = 50;
        performanceOption.series[0].data[0].value = 50;
        completionGauge.setOption(completionOption);
        performanceGauge.setOption(performanceOption);
        updateLastUpdateTime();
    });

    // 窗口大小变化时重绘图表
    window.addEventListener('resize', function() {
        completionGauge.resize();
        performanceGauge.resize();
    });

    // 初始化
    startAutoUpdate();
    updateLastUpdateTime();
</script>
</body>
</html>


<!--	该仪表盘系统具有以下功能和特点：-->

<!--	• **现代化UI设计**：采用渐变背景、圆角阴影和悬停动画效果，视觉体验优秀-->

<!--	• **双仪表盘展示**：包含任务完成率和系统性能两个核心指标，支持180度半圆和210度扇形两种显示方式-->

<!--	• **实时数据更新**：通过setInterval实现定时数据刷新，可自定义更新频率-->

<!--	• **交互式控制面板**：提供目标值滑块调节、更新频率选择和手动操作功能-->

<!--	• **响应式布局**：使用Grid系统确保在不同屏幕尺寸下的良好显示效果-->

<!--	• **详细配置选项**：支持坐标轴线样式、刻度标记、分割段数等全面定制-->

<!--	• **数据动画效果**：指针移动和数值变化都带有平滑的过渡动画-->

<!--	系统通过ECharts的gauge组件实现专业级的仪表盘可视化，能够直观展示业务指标状态和变化趋势-->
